<template>
	
	<div id="app">		
		<!-- 导航start -->
		<div class="header clearfix">
			<div class="cont">
				<div class="logo">
					<img src="http://www.wuzhen.com.cn/resource/web/images/logo.png" alt="">
				</div>
				<div class="right">
					<div class="top">
						<div class="phone">
							<img src="http://www.wuzhen.com.cn/resource/web/images/phone-icon.png" alt="">
							<span>0573-88731088</span>
						</div>
						<span>|</span>
						<div>乌镇旅游</div>
						<span>|</span>
						<div>巾帼文明岗</div>
						<select name="" id="">
							<option value="">中文</option>
							<option value="">英文</option>
						</select>
						<span>|</span>
						<div class="search">
							<a href="">								
								<img src="http://www.wuzhen.com.cn/resource/web/images/search-icon.png" alt="">
							</a>
						</div>
						<div class="book"><router-link to="/jiudian">门票住宿预订</router-link></div>
					</div>
					<div class="nav">						
						<div><router-link to="/">首页</router-link></div>
						<div><router-link to="/youjigonglue">游记攻略</router-link></div>
						<div><router-link to="/wuchu">乌村</router-link></div>								
						<div><router-link to="/gaishu">概述</router-link></div>
						<div><router-link to="/zhushu">住宿</router-link></div>
						<div><router-link to="/yinji">影集</router-link></div>
						<div><router-link to="/wenhuahuodong">文化活动</router-link></div>
						<div><router-link to="/wenhuayishu">文化艺术</router-link></div>
																		
					</div>
				</div>
			</div>
		</div>
		
		<!-- 导航end -->
		<router-view></router-view>			
		
        
		<!-- 脚部start -->
		<div class="footer">
			<div class="wrap">
				<div class="about-us">
					<span class="span1">关于我们</span>
					<span class="span2">0573-88731088</span>
					<span class="span3">浙江省桐乡市乌镇石佛南路18号</span>
				</div>
				<div class="foot-nav">
					<ul class="cl clearfix">
						<li>传统乌镇
							<ul>
								<li><a href="">概述</a></li>

								<li><a href="">乌镇渊源</a></li>

								<li><a href="">乌镇名人</a></li>

								<li><a href="">乌镇民俗</a></li>

							</ul>
						</li>
						<li>度假乌镇
							<ul>
								<li><a href="">住宿</a></li>

								<li><a href="">美食</a></li>

								<li><a href="">休闲娱乐</a></li>

								<li><a href="">伴手礼</a></li>

								<li><a href="" target="_blank">乌村</a></li>

							</ul>
						</li>
						<li>文化乌镇
							<ul>
								<li><a href="">文化活动</a></li>

								<li><a href="">乌镇戏剧节</a></li>

								<li><a href="">乌镇国际当代艺术邀请展</a></li>

								<li><a href="">乌镇国际未来视觉艺术计划</a></li>

								<li><a href="">木心美术馆</a></li>

							</ul>
						</li>
						<li>会展乌镇
							<ul>
								<li><a href="">场地介绍</a></li>

								<li><a href="">服务介绍</a></li>

								<li><a href="">乌镇互联网国际会展中心</a></li>

								<li><a href="">成功案例</a></li>

							</ul>
						</li>
						<li>互动体验
							<ul>
								<li><a href="">影集</a></li>

								<li><a href="">图集</a></li>

								<li><a href="" target="_blank">直播</a></li>

								<li><a href="">达人体验报名</a></li>

							</ul>
						</li>
						<li>活动公告
							<img src="">
							<ul>
								<li><a href="">景区公告</a></li>

								<li><a href="">景区活动</a></li>

								<li><a href="">新闻动态</a></li>

							</ul>
						</li>
						<li>出行锦囊
							<img src="">
							<ul>
								
								<li><a href="">游记攻略</a></li>

								<li><a href="">服务</a></li>

								<li><a href="">交通信息</a></li>

							</ul>
						</li>
						<li>服务优化
							<img src="">
							<ul>
								<li><a href="">问题解答</a></li>
								<li><a href="">宾客意见</a></li>
								<li><a href="">问卷调查</a></li>
							</ul>
						</li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="foot">
					<div class="left">
						<ul>
							<li><a href="">版权声明</a><span>|</span></li>
							<li><a href="">网站地图</a><span>|</span></li>
							<li><a href="">友情链接</a><span>|</span></li>
							<li><a href="">媒体专区</a></li>
						</ul>
					</div>
					<div class="right">
						<p>乌镇旅游股份有限公司©版本所有|<a style="color: inherit" href="https://beian.miit.gov.cn/">浙ICP备09047744号-6</a>|<a style="color: inherit"
							 href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33048302000208">浙公网安备33048302000208号</a></p>
					</div>
				</div>
			</div>
		</div>
		<!-- 脚部end -->
					
	</div>
</template>

<style >
	/* 头部start */
	body{
		overflow-x:hidden;
	}
	* {
		padding: 0;
		margin: 0;
	}

	a {
		text-decoration: none;
	}

	.clearfix::after {
		display: block;
		content: "";
		clear: both
	}

	.header {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		position: fixed;
		z-index: 99;
	}

	.header .cont {
		padding: 20px 50px 0;
	}

	.header .right .top div,
	.header .right .nav div {
		display: inline-block;
	}

	.header .right .top span {
		display: inline-block;
		margin: 0 10px;
	}

	.header .logo {
		float: left;
	}

	.header .right {
		float: right;
	}

	.header select {
		border: 1px solid #fff;
		margin-left: 10px;
		background-color: rgba(0, 0, 0, 0);
		color: #FFFFFF;
		font-size: 16px;
		outline: none;
	}

	.header .right .top {
		text-align: right;
	}

	.header .right .top .search {
		margin-right: 10px;
	}

	.header .right .top .search img {
		width: 30px;
		vertical-align: middle;
	}

	.header .right .top .book {
		width: 110px;
		height: 40px;
		background-color: red;
		text-align: center;
		line-height: 40px;
	}

	.header .right .top .book a {
		color: #fff;
	}

	.header .nav {
		text-align: right;
	}

	.header .nav>div {
		
		font-size: 25px;
		margin-top: 20px;
		margin-left: 20px;
		padding-bottom: 4px;
	}
     .header .nav>div a{
		color: #FFFFFF; 
	 }
	.header .nav>div:hover {
		border-bottom: #FF0000 2px solid;
	}

	/* 头部end */
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* 脚部start */
	.footer {
		background-color: #272831;
		width: 100%;
	}

	.footer .wrap {
		padding: 30px 300px;
	}

	.footer .about-us {
		color: #fff;
	}

	.footer .about-us .span1 {
		font-family: Arial, '微软雅黑', 'Microsoft YaHei', PingFangSC-Regular;
		font-size: 24px;
		letter-spacing: 1.07px;
		padding-right: 79px;
	}

	.footer .about-us .span2 {
		font-family: Arial, '微软雅黑', 'Microsoft YaHei', PingFangSC-Regular;
		font-size: 18px;
		letter-spacing: 0.8px;
		padding-right: 20px;
		display: inline-block;
		line-height: 20px;
		border-right: 1px solid rgb(126, 128, 138);
	}

	.footer .about-us .span3 {
		font-family: Arial, '微软雅黑', 'Microsoft YaHei', PingFangSC-Regular;
		font-size: 18px;
		letter-spacing: 0.8px;
		padding-left: 20px;
	}

	.footer .foot-nav {
		padding-bottom: 24px;
		border-bottom: 1px solid #3d3d47;
	}

	.footer .foot-nav>ul {
		margin-top: 32px;
		border-top: 1px solid #7E808A;
		padding-top: 40px;
	}

	.footer .foot-nav>ul>li {
		font-family: Arial, '微软雅黑', 'Microsoft YaHei', PingFangSC-Regular;
		font-size: 18px;
		color: #FFFFFF;
		letter-spacing: 0.8px;
		float: left;
		margin-right: 85px;
		width: 89px;
	}

	.footer .foot-nav>ul>li>ul {
		padding-top: 26px;
	}

	.footer .foot-nav>ul>li>ul>li>a {
		font-family: Arial, '微软雅黑', 'Microsoft YaHei', PingFangSC-Regular;
		font-size: 12px;
		color: #7E808A;
		letter-spacing: 0.8px;
		line-height: 24px;
		padding-top: 5px;
		padding-bottom: 5px;
		display: block;
	}

	.footer .foot {
		height: 60px;
		line-height: 60px;
	}

	.footer .foot ul li {
		float: left;
	}
	.footer .foot a{
		color: #7E808A;
	}
	
	.footer .foot .left span{
		display: inline-block;
		color: #7E808A;
		padding: 0 5px;
	}
	.footer .foot .left li:last-child{
		margin-right: 50px;
	}
	.footer .foot p {
		font-family: Arial, '微软雅黑', 'Microsoft YaHei', PingFangSC-Regular;
		font-size: 14px;
		color: #7E808A;
		letter-spacing: 0.8px;
	}
	
	
</style>
